<template>
  <div class="contentView" :style="`height:${contentHeight}px`">
    <div class="routeHeader">
      <el-button type="primary" @click="submitForm('save')" v-if="!isDis()"
        >保存</el-button
      >
      <el-button type="primary" @click="submitForm('submit')" v-if="!isDis()"
        >提交</el-button
      >
      <el-button
        style="color: #f56c6c"
        @click="cancelForm"
        v-if="formType == 'update' && [10,50].includes(formData.dictSendStatus)"
        >作废</el-button
      >
      <el-button @click="goBack">关 闭</el-button>
    </div>
    <el-scrollbar :style="`height:${contentHeight - 63}px`">
      <div class="orderTitle mb-10px">
        <img src="@/assets/imgs/hasColorLogo.png" />
        <span style="font-size: 25px">发货申请单</span>
        <span style="font-size: 13px">申请编号：{{ formData.sendNumber || '暂无' }}</span>
      </div>
      <el-row class="tableView" v-loading="formLoading">
        <el-col :span="24" class="colTitle noLeftBor">请车基本信息</el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle noLeftBor">发货类型</div>
          <div class="cellContent">
            <el-select
              v-model="formData.dictDeliveryType"
              placeholder="请选择发货类型"
              clearable
              size="large"
              :disabled="isDis()"
            >
              <el-option
                v-for="dict in getIntDictOptions('dict_delivery_type')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">客户名称</div>
          <div class="cellContent">
            <el-input
              v-model="formData.customerName"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">参考里程</div>
          <div class="cellContent">
            <el-input v-model="formData.mileage" placeholder="" :disabled="isDis()" />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">产品尺寸</div>
          <div class="cellContent">
            <el-input
              v-model="formData.productSize"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem noLeftBor">
          <div class="cellTitle noLeftBor">要求车型</div>
          <div class="cellContent">
            <el-input
              v-model="formData.askVehicleModel"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">装卸方式</div>
          <div class="cellContent">
            <el-input
              v-model="formData.handlingMode"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">车次</div>
          <div class="cellContent">
            <el-input
              v-model="formData.trainNumber"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="6" class="cellItem">
          <div class="cellTitle">产品重量</div>
          <div class="cellContent">
            <el-input
              v-model="formData.productWeight"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="12" class="cellItem">
          <div class="cellTitle noLeftBor">客户地址</div>
          <div class="cellContent">
            <el-input
              v-model="formData.customerAddress"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="12" class="cellItem">
          <div class="cellTitle">装货地点</div>
          <div class="cellContent">
            <el-input
              v-model="formData.packingAddress"
              placeholder=""
              :disabled="isDis()"
            />
          </div>
        </el-col>
        <el-col :span="12" class="cellItem">
          <div class="cellTitle noLeftBor">预计装车时间</div>
          <div class="cellContent">
            <el-date-picker
              v-model="formData.loadingStartTime"
              type="datetime"
              :disabled="isDis()"
              placeholder="请选择预计装车时间"
              format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </el-col>
        <el-col :span="12" class="cellItem">
          <div class="cellTitle">到车时间</div>
          <div class="cellContent">
            <el-date-picker
              v-model="formData.loadingEndTime"
              type="datetime"
              placeholder="选择到车时间"
              :disabled="isDis()"
              format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </el-col>
        <el-col :span="24" class="cellItem">
          <div class="cellTitle noLeftBor" style="line-height: 100px">特殊要求</div>
          <div class="cellContent" style="height: 100px">
            <el-input
              v-model="formData.requirements"
              :rows="4"
              resize="none"
              type="textarea"
              :disabled="isDis()"
              placeholder=""
            />
          </div>
        </el-col>
        <el-col
          :span="24"
          class="colTitle noLeftBor"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 20px;
          "
        >
          <span>产品信息</span>
          <el-button type="primary" @click="addCol" :disabled="isDis()"
            >新增行</el-button
          >
        </el-col>
        <el-col
          :span="24"
          v-for="(item, index) in formData.productionSendDetailCreateReqVOS"
          :key="index"
        >
          <el-row>
            <el-col :span="11" class="cellItem">
              <div class="cellTitle noLeftBor">产品编号</div>
              <div class="cellContent">
                <el-input
                  v-model="item.productNumber"
                  placeholder=""
                  :disabled="isDis()"
                />
              </div>
            </el-col>
            <el-col :span="11" class="cellItem">
              <div class="cellTitle">发货占比</div>
              <div class="cellContent">
                <el-input
                  v-model="item.proportionExpenses"
                  type="number"
                  placeholder=""
                  :disabled="isDis()"
                />
              </div>
            </el-col>
            <el-col :span="2" class="cellItem" style="border-left:1px solid #000;display:flex;justify-content:center">
              <el-button
                style="color: #f56c6c"
                :disabled="isDis()"
                link
                @click="delCol(index)"
                >移除行</el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>
<script setup lang="ts">
   import { getIntDictOptions } from '@/utils/dict'
   import * as ProductionSendApi from '@/api/produce/productManagement/productionSend'
   import { useTagsViewStore } from '@/store/modules/tagsView'
   const { t } = useI18n() // 国际化
   const message = useMessage() // 消息弹窗

   const formType = ref('') // 表单的类型：create - 新增；update - 修改  view - 查看
   const formData = ref({
     id: undefined,
     sendNumber: undefined,
     dictDeliveryType: undefined,
     customerName: undefined,
     mileage: undefined,
     productSize: undefined,
     askVehicleModel: undefined,
     handlingMode: undefined,
     trainNumber: undefined,
     productWeight: undefined,
     customerAddress: undefined,
     packingAddress: undefined,
     loadingStartTime: undefined,
     loadingEndTime: undefined,
     requirements: undefined,
     productionSendDetailCreateReqVOS: []
   })
   const formRef = ref() // 表单 Ref
   const isDis = () => {
    if(formType.value == 'view'){
      return true
    }
    if(formType.value == 'create'){
      return false
    }
    if(formData.value.dictSendStatus != 10 && formType.value == 'update'){
      return true
    }
    return false
   }
   //新增行
   const addCol = () => {
     formData.value.productionSendDetailCreateReqVOS.push({
       productNumber: undefined,
       proportionExpenses: undefined
     })
   }
   //移除行
   const delCol = (index: number) => {
     formData.value.productionSendDetailCreateReqVOS.splice(1, index)
   }
   /** 提交/保存表单 */
   const roleList = ref([null, undefined, ''])
   const submitForm = async (type: string) => {
     const data = JSON.parse(JSON.stringify(formData.value))
     if (roleList.value.includes(data.dictDeliveryType)) {
       message.error('请选择发货类型')
       return
     }
     if (!data.productionSendDetailCreateReqVOS.length) {
       message.error('产品信息必须有一条')
       return
     }
     let flag = false
     data.productionSendDetailCreateReqVOS.map((item) => {
       if (roleList.value.includes(item.productNumber)) {
         message.error('产品编号不能为空')
         flag = true
       }
       if (roleList.value.includes(item.proportionExpenses)) {
         message.error('发货占比不能为空')
         flag = true
       }
     })
     //如果是请车
     if (data.dictDeliveryType == 10) {
       for (let i in data) {
         if (roleList.value.includes(data[i]) && i != 'updaterName') {
           message.error('数据不能为空')
           return
         }
       }
     }
     if (flag) {
       return
     }
     formLoading.value = true
     try {
       //保存
       console.log(formType.value)
       if (type == 'save') {
         if (formType.value === 'create') {
           await ProductionSendApi.createProductionSend(data)
           message.success(t('common.createSuccess'))
         } else {
           await ProductionSendApi.updateProductionSend(data)
           message.success(t('common.updateSuccess'))
         }
       } else {
         //提交
         await ProductionSendApi.submitProductionSend(data)
         message.success('操作成功')
       }
       goBack()
     } finally {
       formLoading.value = false
     }
   }
   /**作废 */

   const cancelForm = async () => {
     const data = { id: formData.value.id }
     formLoading.value = true
     try {
       await ProductionSendApi.cancelProductionSend(data)
       message.success('操作成功')
       goBack()
     } finally {
       formLoading.value = false
     }
   }
   /** 重置表单 */
   const resetForm = () => {
     formData.value = {
       id: undefined,
       sendNumber: undefined,
       dictDeliveryType: undefined,
       customerName: undefined,
       mileage: undefined,
       productSize: undefined,
       askVehicleModel: undefined,
       handlingMode: undefined,
       trainNumber: undefined,
       productWeight: undefined,
       customerAddress: undefined,
       packingAddress: undefined,
       loadingStartTime: undefined,
       loadingEndTime: undefined,
       requirements: undefined,
       productionSendDetailCreateReqVOS: []
     }
     formRef.value?.resetFields()
   }
   /**返回 */
   const tagsViewStore = useTagsViewStore()
   const route = useRouter() // 路由
   const goBack = async () => {
     //获取当前路由并删除tagView
     tagsViewStore.delView(route.currentRoute.value)
     //跳转列表页
     route.push({
       path: '/produce/produce/productManagement/productionSend'
     })
   }
   // 获得id
   const { query } = useRoute() // 路由的查
   const contentHeight = ref(0)
   const formLoading = ref(false)
   /** 初始化 */
   onMounted(async () => {
     formLoading.value = true
     await resetForm()
     if (query.id) {
       formData.value = await ProductionSendApi.getProductionSend(query.id)
     }
     formType.value = query.type
     contentHeight.value = document.body.clientHeight - 127
     formLoading.value = false
   })
</script>
<style lang="scss" scoped>
   .contentView {
     padding: 10px;
     background: #fff;
     .orderTitle {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
       img {
         width: 236px;
         height: 52px;
       }
     }
     .tableView {
       border: 1px solid #000;
       border-bottom: none;
       font-size: 14px;
       .colTitle {
         line-height: 50px;
         font-weight: bold;
         padding-left: 23px;
         background: rgb(223, 223, 223);
         border-bottom: 1px solid #000;
       }
       .noLeftBor {
         border-left: none !important;
       }
       .cellTitle {
         width: 100px;
         background: rgb(223, 223, 223);
         text-align: center;
         line-height: 50px;
         font-weight: bold;
         border-left: 1px solid #000;
       }
       .cellItem {
         display: flex;
         align-items: center;
         border-bottom: 1px solid #000;

         .cellContent {
           flex: 1;
           flex-shrink: 0;
           height: 50px;
           display: flex;
           align-items: center;
           position: relative;
           border-left: 1px solid #000;

           .search-icon {
             position: absolute;
             right: 10px;
             top: calc(50% - 6px);
             cursor: pointer;
           }
         }
       }
       :deep(.el-input) {
        width:100%;
        height:100%;
         --el-input-focus-border: #fff;
         --el-input-transparent-border: 0 0 0 0px;
         --el-input-border-color: #fff;
         --el-input-hover-border: 0px !important;
         --el-input-hover-border-color: #fff;
         --el-input-focus-border-color: #fff;
         --el-input-clear-hover-color: #fff;
         box-shadow: 0 0 0 0px !important;
         --el-input-border: 0px;
       }
       :deep(.el-select .el-input__wrapper.is-focus) {
         box-shadow: 0 0 0 0px !important;
       }
       :deep(.el-select .el-input.is-focus .el-input__wrapper) {
         box-shadow: 0 0 0 0px !important;
       }
       :deep(.el-select .select-trigger) {
        width:100%;
        line-height:50px;
        height:50px;
         --el-select-border-color-hover: #fff;
       }
       :deep(.el-textarea__inner) {
        
         box-shadow: 0 0 0 0px;
       }
       :deep(.el-textarea__inner:hover) {
         box-shadow: 0 0 0 0px;
       }
       :deep(.el-textarea__inner:focus) {
         box-shadow: 0 0 0 0px;
       }
     }
   }
   .routeHeader {
     width: 100%;
     border-bottom: 1px solid #969696;
     display: flex;
     align-items: center;
     padding: 10px 0;
   }
</style>